<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 创建页面结构 -->
    <div id="app">
        <router-link to="/">首页</router-link>
        <router-link to="/product">产品页面</router-link>
        <!-- 页面渲染出口 -->
        <router-view></router-view>
    </div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
    //3, 定义组件
    const Home = {
        template:`
            <div>首页</div>
        `
    };
    const Product = {
        template:`
            <div>产品界面</div>
        `
    }
    //a,6绑定组件和路由器之间的关系
    const routes = [
        {
            path:"/",
            component:Home,
            //定义一个独享的路由器
            beforeEnter:(to,from,next)=>{
                //当点击主页才会出现
                console.log("主页的路由独享的导航守卫")
                next();  //继续进行下一步
            }
        },
        {
            path:"/product",
            component:Product
        }
    ]
    //a.7___真正的跟路由
    let router = new VueRouter({
        routes  //把组件和路由绑定的关系传过来给根路由
    })
    let vm = new Vue({
        //再把根路由配置到vue实例中
        router,
        el:"#app"
    })
</script>
</html>